<template>
    <div class="member-box">
        <div class="member-put">
            <span>*</span><label>会员卡号</label><br>
            <el-input placeholder="请输入卡号/刷卡" v-model="member.idcard" clearable size="small">
            </el-input>
        </div>
        <div class="member-put">
            <span>*</span><label>会员姓名</label><br>
            <el-input placeholder="请输入会员姓名" v-model="member.memberName" clearable size="small">
            </el-input>
        </div>
        <div class="member-put">
            <span>*</span><label>会员手机号</label><br>
            <el-input placeholder="请输入会员手机号" v-model="member.phoneNumber" clearable size="small">
            </el-input>
        </div>
        <div class="member-put">
            <span>*</span><label>会员生日</label><br>
            <el-date-picker v-model="member.birthday" size="small" align="right" type="date" placeholder="选择日期"
                :picker-options="pickerOptions">
            </el-date-picker>
        </div>
        <div class="member-put">
            <span>*</span><label>会员性别</label><br>
            <template>
                <el-radio v-model="member.gender" label="1">男</el-radio>
                <el-radio v-model="member.gender" label="2">女</el-radio>
            </template>
        </div>
        <div class="member-put">
            <span>*</span><label>会员等级</label><br>
            <template>
                <el-radio v-model="member.vipLevelId" label="1">普通会员</el-radio>
                <el-radio v-model="member.vipLevelId" label="2">黄金会员</el-radio>
                <el-radio v-model="member.vipLevelId" label="3">砖石会员</el-radio>
            </template>
        </div>
        <!-- <div class="member-put">
            <el-button>取消</el-button>
        </div> -->
        <div class="member-put">
            <el-button type="primary" @click="addmember">提交</el-button>
        </div>
    </div>
</template>

<script>
    import {
        createNamespacedHelpers
    } from "vuex";
    const {
        mapActions
    } = createNamespacedHelpers(
        "member"
    );
    export default {
        data() {
            return {
                member: {
                    idcard: '',
                    memberName: '',
                    gender: '',
                    vipLevelId: '',
                    birthday: ''
                },
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
            }
        },
        
          computed:{
         dialogVisible:{
              get(){
               return  this.$store.state.member.dialogVisible
              },
              set(val){
                this.$store.state.member.dialogVisible = val;
              }
         }

        },
        methods: {
            
            ...mapActions(['memberAdd']),

            async addmember() {
                console.log(this.member);
                const data = await this.memberAdd(this.member)
                console.log('data', data);
                if (data.data.msg == 'OK') {
                    this.$message({
                        message: '新增会员成功',
                        type: 'success'
                    });
                 this.dialogVisible=false
                }
            }
        }
    }
</script>

<style lang='scss' scoped>
    /deep/ .el-radio {
        margin-top: 15px;
    }

    /deep/ .el-input__icon {
        margin-top: 5px;
    }

    .member-box {
        width: 600px;
        /* height: 200px; */
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
    }

    .member-put {
        width: 48%;
        /* height: 150px; */
        font-weight: 700;
        text-align: left;
        margin-bottom: 15px;

        /deep/.el-input__inner {
            width: 190px;
            margin-top: 10px;
        }

        /deep/ .el-button {

            margin-top: 10px;
            margin-left: 92px;
        }

        span {
            color: red;
        }
    }
</style>